<template>
  <!-- 通过name的值动态封装可复用过渡效果 -->
  <Transition :name="fileName" appear mode="out-in">
    <slot>123</slot>
    <!-- 向内传递插槽内容 -->
  </Transition>
</template>

<script setup>
const props = defineProps({
  fileName: {
    type: String,
    default: "",
  },
});
</script>

<style scoped>
/* 定义多组 CSS 过渡 动态切换动画*/
.name-enter-active {
  animation: backInUp 2s ease;
}

.fade-leave-active {
  animation: backOutLeft 2s ease;
}
.color1 {
  color: blue;
}
</style>